/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
	padding: 14rem 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-image: url('/static/img/art/derivative/dora-toto.jpg');
	background-size: cover;
	background-position: center;
	background-position-y: calc(0% + 15%);
	background-repeat: no-repeat;
	background-blend-mode: darken;
	background-color: var(--ifm-color-hero-background);
}

.heroTitle {
	font-size: 5rem;
	color: var(--ifm-color-title);
	padding-bottom: 1rem;
}

.heroSubtitle {
	padding-bottom: 2rem;
	color: var(--ifm-color-subtitle);
}

@media screen and (max-width: 996px) {
	.heroBanner {
		padding: 8rem 0;
	}
}

.buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 2rem;
}
